<h3>Layout Overview</h3>

The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview,
right, and bottom. By default all of the panels are created, but only the ones you define will be visible. The main panel of the layout
is always visible.
<div style="height: 20px"></div>

<h4>Example</h4>

<textarea class="html">
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="layout" style="height: 400px"></div>
</body>
<script type="module">
import { w2layout } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let layout = new w2layout({
    name: 'myLayout',
    panels: [
        { type: 'top', size: 60, html: 'top panel' },
        { type: 'main', style: 'background-color: #f5fff1', html: 'main' },
        { type: 'left', size: 150, resizable: true, html: 'left' },
        { type: 'right', size: 150, resizable: true, html: 'rigth' }
    ]
})
layout.render('#layout')
</script>
</html>
</textarea>

It is easy to add and remove content to the panels. You can display HTML or other objects. The w2layout object will add a listener
to the window resize event and will automatically resize the panels based on the width and height of its box.

<textarea class="html">
w2ui.myLayout.show('right');
</textarea>
